<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        .box{
            width: 1210px;
            height: 48px;
            margin: 100px auto;
            background-color: #E8E7E3;
            line-height: 48px;
            font-size: 14px;
            color: #900b09;
            /* 设置为弹性容器，其子元素为弹性元素*/
            display: flex;
            /* flex-direction: ;设置弹性方向
            row row-reverse column column-reverse */
        }
        .box li{
            flex-grow: 1;
            text-align: center;
              /* 若父元素有空白时，弹性元素开启grow 
            若子元素溢出，开启shrink（收缩）*/
        } 
        .box li a{
            display: block;
            /* flex-grow: 1;
            此处为a设置grow无用，因为a并非.box的子元素，而是他后代元素，所以a并非弹性元素 */
        }
        .box li a:hover{
            background-color: #3F3F3F;
            color: #E7E6E2;
        }
    </style>
</head>
<body>
    <ul class="box">
        <li class="box2">
            <a href="">HTML/CSS</a>
        </li>
        <li class="box2">
            <a href="">Brower Side</a>
        </li>
        <li class="box2">
            <a href="">Serve Side</a>
        </li>
        <li class="box2">
            <a href="">Programming</a>
        </li>
        <li class="box2">
            <a href="">XML</a>
        </li>
        <li class="box2">
            <a href="">Web Building</a>
        </li>
        <li class="box2">
            <a href="">Reference</a>
        </li>
    </ul>
</body>
</html>